<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>this的指向总结——谁调用指向谁</h1>
    <button class="btn1">click</button>
    <script>
        // 1.作为Dom对象的事件处理函数，使用this时，this指向当前Dom对象
        var btn = document.querySelector('.btn1');
        btn.onclick = function () {
            console.log(this);
        }

        // 2.作为对象的方法使用时，this指向当前对象
        var obj1 = {
            age: 18,
            sayHi: function () {
                console.log(this);
            }
        }
        obj1.sayHi()

        // 3.作为构造函数使用时，this指向当前构造函数所实例化出来的对象
        function Gouzao(age) {
            this.age = age;
            console.log(777,this);
        }

        var g1 = new Gouzao(18);
        var g2 = new Gouzao(66);


        // 4.在函数嵌套时，内层函数不会继承外层函数this的指向
        var obj2 = {
            name: 'Tom',
            fn1: function () {
                var that = this; // 保留此时的this指向
                console.log(11, this);
                function bb() {
                    // 就像在bb里面得到外面的this  
                    console.log(22, this);
                    console.log(66, that);
                }
                bb()
            }
        }

        obj2.fn1()


        // 5.作为全局函数使用this时，this指向window;
        function abc () {
            console.log(5, this);
        }
        abc ()
    </script>
</body>

</html>